<template>
	<view class="record-info page-content">
		<nav-bar back  @clickRight="back">
			{{ pageTitle }}
		</nav-bar>
		<!-- <component :is="componentName"></component> -->
		<view class="page-main">
			<view class="info-box">
				<view class="info-item" v-for="item in list" >
					<view class="info-item-left">
						{{item.label}}
					</view>
					<view class="info-item-right">
						{{item.value}}{{item.unit}}
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn-item middleCenter edit" @click="handlerEdit">
				编辑
			</view>
			<view class="btn-item middleCenter delete" @click="deleteFn">
				删除
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import {getDataByKey,getHistoryData,serializeToUrlParams,removeStore} from '@/utils/index.js'
	import {reactive, ref} from 'vue'
	const pageTitle = ref('')
	const list = ref([])
	let storeData = getHistoryData()
	let dataInfo =reactive({})
	const deleteFn=()=>{
		uni.showModal({
			title: '提示',
			content: '删除记录',
			success: function (res) {
				if (res.confirm) {
					let {id,key} = dataInfo
					removeStore(key,id)
					console.log('用户点击确定',dataInfo);
					uni.showToast({
						title: `删除成功`
					})
					uni.switchTab({
						url: '/pages/tabbar/tabbar-1/tabbar-1'
					});
					
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	
	const handlerEdit =()=>{
		console.log(dataInfo);
		let {id,key} = dataInfo
		let query ={
			type:key,
			id
		}
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-3/recordDetail/recordDetail?${serializeToUrlParams(query)}`
		});
	}
	
	
	onLoad(({id})=>{
		let storeData = getHistoryData()
		console.log(storeData,id);
		dataInfo = storeData.find(item=>item.id == id)
		pageTitle.value = dataInfo.recordName
		console.log(dataInfo,'dataInfo');
		list.value =getDataByKey(dataInfo.key).infoList.map(item=>{
			return {
				...item,
				value:dataInfo[item.key]
			}
		})
		console.log(list.value);
		
	})
</script>

<style lang="scss" scoped>
	.info-box{
		padding: 0 20rpx;
		.info-item{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #000;
			border-bottom: 1px solid #ccc;
			padding: 20rpx;
			.info-item-left{
				width: 180rpx;
			}
			.info-item-right{
				flex: 1;
				padding-left: 20rpx;
				overflow-wrap:break-word;
			}
		}
		
	}
	.btnBox{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		height: 50px;
		display: flex;
		.btn-item{
			height: 100%;
			font-size: 24rpx;
			flex: 1;
		}
		.edit{
			background: orange;
		}
		.delete{
			background: #fa976d;
		}
	}
</style>